<template>
  <div id="container"></div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';


onMounted(() => {


  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 50;
  camera.position.y = 5
  camera.position.x = -30


  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('container').appendChild(renderer.domElement);


  // const geometry = new THREE.BoxGeometry(1, 1, 1);
  // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

  // 创建一个平面几何体
  // const geometry = new THREE.PlaneGeometry(1, 1);
  // const material = new THREE.MeshBasicMaterial({
  //   color: 0xffff00,
  //   side: THREE.DoubleSide
  // });

  // 通过 BufferGeometry 创建几何体
  // const geometry = new THREE.BufferGeometry();
  // // 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
  // // 因为在两个三角面片里，这两个顶点都需要被用到。
  // const vertices = new Float32Array([
  //   0,0,1,
  //   1,0,0,
  //   0,1,0
  // ]);

  // // itemSize = 3 因为每个顶点都是一个三元组。
  // geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
  // const material = new THREE.MeshBasicMaterial({ 
  //   color: 0xff0000,
  //   side: THREE.DoubleSide
  // });


  // const cube = new THREE.Mesh(geometry, material);
  // // cube.position.set(0, 2, 0)
  // scene.add(cube);

  // 添加物体，创建几何体
  const cubeGeometry = new THREE.SphereGeometry(0.3) // 设置几何体大小
  const cubeMaterial = new THREE.MeshBasicMaterial({
    color: 0x3461c2
  }) // 设置几何体材质
  // 阵列多个立方体网格模型
  let num = 20
  let balls:any[] = []
  for (let i = 0; i < num; i++) {
    for (let j = 0; j < num; j++) {
      // 根据几何体和材质创建物体
      const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
      cube.position.set(-i * 2, 0, j * 2) // 沿着xz轴阵列
      balls.push(cube)
      scene.add(cube)
      cube.position.y = 2
    }
  }

  console.log(balls)


  //添加光源 
  //会照亮场景里的全部物体（氛围灯），前提是物体是可以接受灯光的，这种灯是无方向的，即不会有阴影。
  // const ambient2 = new THREE.AmbientLight(0xffffff, 0.4);
  // const light2 = new THREE.PointLight(0xffffff, 1);//点光源，color:灯光颜色，intensity:光照强度
  // scene.add(ambient2);
  // light2.position.set(200, 300, 400);
  // scene.add(light2);



  // 增加网格
  // const gridHelper = new THREE.GridHelper(10, 10);
  // scene.add(gridHelper);


  // 添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement)

  // 设置阻尼
  // controls.enableDamping = true
  // controls.dampingFactor = 0.01
  // controls.autoRotate = true
  // controls.autoRotateSpeed = 1

  // 添加三维坐标轴
  const axesHelper = new THREE.AxesHelper(5);
  // axesHelper.position.y = 2
  // axesHelper.position.z = 1
  scene.add(axesHelper);

  // renderer.setClearColor('pink'); //canvas画布颜色


  function animate() {
    let count = 0
    requestAnimationFrame(animate);

    for (let a = 0; a < num; a++) {
      for (let b = 0; b < num; b++) {
        let time = Date.now() * 0.05;
        let displacement = Math.sin( time ) * 1.5 + 2.25
        let sphere = balls[count]
        sphere.position.y = displacement;
        renderer.render(scene, camera);
        count++
      }
    }


    controls.update()
    renderer.render(scene, camera);
  }
  animate();

})


</script>

<style lang="scss" scoped></style>